<template>
    <div>
        <el-checkbox-group :disabled="item.attribute.hasOwnProperty('disabled') ? item.attribute.disabled.value : false" v-model="modelValue" :size="item.attribute.hasOwnProperty('componentSize') ? item.attribute.componentSize.value : large">
            <el-checkbox v-for="(check, checkIndex) in JSON.parse(item.attribute.checkBoxGroupData.extendData)" :key="checkIndex" :label="check.value">{{ check.label }}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
export default {
    name: 'CheckBoxGroup',
    props: {
        item: {
            type: Object,
            default: function () {
                return {}
            }
        },
        value: null
    },
    emits: ['update:modelValue'],
    data() {
        return {
            modelValue: []
        }
    },
    watch: {
        modelValue: {
            handler(v) {
                this.$emit('update:modelValue', { value: v })
            },
            deep: true
        }
    },
    methods: {},
    mounted() {
        this.modelValue = this.value ? (typeof this.value === 'string' ? this.value.split(',') : this.value) : []
    }
}
</script>

<style></style>
